<!-- 左侧栏组件 -->
<template>
  <div class="h-full relative">
    <div class="p-2 flex items-center">
      <ElInput
        class="shadow-sm"
        size="small"
        placeholder="请输入关键字"
        v-model="filterText"
      ></ElInput>
    </div>
    <ElTree
      draggable
      node-key="id"
      :highlight-current="true"
      :data="store.state.fileTree.data"
      :filter-node-method="filterNode"
      :props="treeProps"
      @node-click="nodeClick"
      :indent="10"
      ref="treeRef"
    >
      <template #default="{ node, data }: any">
        <ElDropdown
          placement="bottom-end"
          trigger="contextmenu"
          class="w-full"
          :hide-on-click="true"
          @visible-change="changeHover($event, data.id)"
        >
          <div
            class="flex items-center p-2 w-full hover"
            :class="data.id === treeHoverId ? 'is-hover' : ''"
          >
            <div class="mr-2">
              <i class="fa fa-folder-o" v-if="data.isDir"></i>
              <i class="fa fa-file-text-o" v-else></i>
            </div>
            <div class="truncate w-full">{{ node.label }}</div>
            <ElTag
              class="ml-3"
              size="mini"
              v-if="!data.isDir && data.occupyUserId"
              >编辑中</ElTag
            >
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem
                @click="showModal(false, data.id)"
                v-if="data.isDir"
                >新建markdown</ElDropdownItem
              >
              <ElDropdownItem
                @click="showModal(true, data.id)"
                v-if="data.isDir"
                >新建文件夹</ElDropdownItem
              >
              <ElDropdownItem
                @click="showModal(data.isDir, null, 'update', data)"
                >修改文件属性</ElDropdownItem
              >
              <ElDropdownItem class="text-red-500" @click="dltFile(data.id)"
                >删除</ElDropdownItem
              >
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </template>
    </ElTree>
    <div class="left-bar-bottom shadow-sm">
      <ElDropdown placement="bottom-start" trigger="click">
        <ElButton size="small" type="primary">
          <i class="el-icon-plus"></i> 新建</ElButton
        >
        <template #dropdown>
          <ElDropdownMenu>
            <ElDropdownItem @click="showModal(false, null)"
              >新建markdown</ElDropdownItem
            >
            <ElDropdownItem @click="showModal(true, null)"
              >新建文件夹</ElDropdownItem
            >
          </ElDropdownMenu>
        </template>
      </ElDropdown>
      <ElTag class="mr-3">
        {{ store.state.user.name }}
      </ElTag>
    </div>

    <FileModal
      :isDir="fileModalProp.isDir"
      :parentId="fileModalProp.parentId"
      :handle="fileModalProp.handle"
      v-model:flag="fileModalProp.flag"
      ref="fileModalRef"
      @updateFile="beforeUpdateFile"
    ></FileModal>
  </div>
</template>

<script setup lang="ts">
import {
  ElTree,
  ElInput,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElButton,
  ElTag,
} from "element-plus"

import FileModal from "../FileModal/index.vue"
import { useStore } from "@/store/index"
import useState from "./hooks/useState"
import useSelect from "./hooks/useSelect"
import useModal from "./hooks/useModal"
import useDltFile from "./hooks/useDltFile"

const store = useStore()
const {
  treeProps,
  treeRef,
  filterText,
  treeHoverId,
  getExpandedList,
  expandTree,
} = useState()

const { nodeClick, changeHover } = useSelect({
  getExpandedList,
  treeHoverId,
})

const { fileModalProp, fileModalRef, filterNode, showModal, beforeUpdateFile } =
  useModal(expandTree)

const { dltFile } = useDltFile(treeRef)
</script>

<style lang="scss" scoped>
:deep(.el-tree-node__content) {
  font-size: 12px;
  padding: 1rem;
  background-color: #fafafa;
  overflow: hidden;
}
.left-bar-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
}
.is-hover {
  border: 1px dashed black;
}
</style>
